<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app"></div>

    <script>
        Vue.config.productionTip = false;

        // 给Vue原型上添加属性
        Vue.prototype.$test = "Vue的显示原型的方法"

        //1.创建组件 Count1现在是构造函数 被使用的时候实例化
        const Count1 = Vue.extend({
            name: "Count1",
            template: `
                <div>
                    <h1>Count1</h1>
                    <button @click = "test">点击测试</button>
                </div>
            `,
            methods:{
                test(){
                    console.log(this.$test);
                    console.log(this.$testCount1);
                }
            }
        })

        //1.创建组件 Count2现在是构造函数 被使用的时候实例化
        const Count2 = Vue.extend({
            name: "Count2",
            template: `
                <div>
                    <h1>Count2</h1>
                    <button @click = "test">点击测试</button>
                </div>
            `,
            methods:{
                test(){
                    console.log(this.$test);
                    console.log(this.$testCount1);

                }
            }
        })

        // 给Count1 Vuecompoent添加属性 只有Count1实例化出来的组件才能用
        Count1.prototype.$testCount1 = "Count1的显示原型的方法"

        console.log(Count1 , "Count1");
        console.log(Count2 , "Count2");



        const vm = new Vue({
            el: "#app",
            data() {
                return {

                }
            },

            //2.注册组件
            components: {
                Count1,
                Count2,
            },

            //模板里使用组件
            template: `
                <div>
                    <Count1/>
                    <Count1/>
                    <br/>
                    <Count2/>
                </div>
            `
        })
    </script>
</body>

</html>